<template>
  <div>
    <div>
      <FormPanel
        ref="formPanel"
        :list="formList"
        :cols="2"
        :formType="type"
        :isSubmitBtn="false"
        @formChange="formChangeHandle"
      />
    </div>
    <div
      :style="{
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDialog">取 消</el-button>
      <el-button @click="saveDialog" type="primary">保 存</el-button>
    </div>
  </div>
</template>

<script>
import {
  addColor,
  updateColor
 } from '@/api/common/cars/colorCars';
import {
  getBrandListDictOEM,
  getSeriesListDictOEM,
  getModelListDictOEM,
  getPackageListDictOEM,
  getOptionListDictOEM,
  getWcolorList,
  getIcolorList,
  addCarOEM,
 } from '@/api/common/cars/masterDataCars';
import { dictionary } from '@/utils/dictMixin';
import Cookies from 'js-cookie';

export default {
  name: 'masterCarsModal',
  mixins: [dictionary],
  props: {
    type: {
      type: String,
      default: 'add'
    },
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    this.saveData = null;
    return {
      formList: this.createFormList(),
      dataType: Cookies.get('dataType'),// 判断是否为厂端
    };
  },
  created() {
    this.init();
    this.getBrandListDictOEM()
    this.getColors()
    this.getIColors()
  },
  methods: {
    async init() {
      if (this.type === 'edit' || this.type === 'show') {
        // 更新接口需要的记录 ID
        this.recordId = this.rowData.productId;
        this.formList.forEach(x => {
          x.initialValue = this.rowData[x.fieldName];
          if(x.fieldName == 'trimColor' && this.type === 'edit'){
            x.initialValue = this.rowData.trimColorId;
          }
        });
        // this.changeBrandSelect(this.rowData.brandId);
        const res1 = await getSeriesListDictOEM(this.rowData.brandId);
        if (res1.resultCode === 200) {
          this.formList.find(item=>item.fieldName==='seriesId').itemList = res1.data.map(x => ({ value: x.seriesId, text: x.seriesName }));
        }
        // this.changeSeriesSelect(this.rowData.seriesId);
        const res2 = await getModelListDictOEM(this.rowData.brandId, this.rowData.seriesId);
        if (res2.resultCode === 200) {
          this.formList.find(item=>item.fieldName==='modelId').itemList = res2.data.map(x => ({ value: x.modelId, text: x.modelName }));
        }
        // this.changeModelSelect(this.rowData.modelId);
        const res3 = await getPackageListDictOEM( this.rowData.brandId, this.rowData.seriesId, this.rowData.modelId,{ isValid:10041001});
        if (res3.resultCode === 200) {
          this.formList.find(item=>item.fieldName==='packageId').itemList = res3.data.map(x => ({ value: x.packageId, text: x.configName }));
        }
        const res4 = await getOptionListDictOEM(this.rowData.packageId);
        if (res4.resultCode === 200) {
          this.formList.find(item=>item.fieldName==='optionId').itemList = res4.data.map(x => ({ value: x.optionId, text: x.optionName }));
        }
        this.formList.find(item=>item.fieldName==='brandId').initialValue = Number(this.rowData.brandId)
        this.formList.find(item=>item.fieldName==='seriesId').initialValue = Number(this.rowData.seriesId)
        this.formList.find(item=>item.fieldName==='modelId').initialValue = Number(this.rowData.modelId)
        this.formList.find(item=>item.fieldName==='packageId').initialValue = Number(this.rowData.packageId)
        this.formList.find(item=>item.fieldName==='optionId').initialValue = Number(this.rowData.optionId)
        if (this.type === 'edit') {
          this.formList.find(item=>item.fieldName==='productCode').disabled = true
        }
      }
    },
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '产品代码',
          disabled: this.type === 'show'?true:false,
          fieldName: 'productCode',
          placeholder: '',
          rules: [
            { required: true, message: '请输入产品代码', trigger: 'blur' },
            { pattern: /^[u4E00-u9FA5]+$/, message: '只允许输入数字和字母' }
          ]
        },
        {
          type: 'INPUT',
          label: '产品名称',
          disabled: this.type === 'show'?true:false,
          fieldName: 'productName',
          placeholder: '',
          rules: [{ required: true, message: '请输入产品名称', trigger: 'blur' }]
        },
        {
          type: 'SELECT',
          label: '品牌',
          disabled: this.type === 'show'?true:false,
          fieldName: 'brandId',
          placeholder: '请选择',
          itemList: [],
          disabled:false,
          rules: [{ required: true, message: '请选择品牌', trigger: 'change' }],
          change: val => {
            this.changeBrandSelect(val);
          }
        },
        {
          type: 'SELECT',
          label: '车系',
          disabled: this.type === 'show'?true:false,
          fieldName: 'seriesId',
          placeholder: '请选择',
          itemList: [],
          disabled:false,
          rules: [{ required: true, message: '请选择车系', trigger: 'change' }],
          change: val => {
            this.changeSeriesSelect(val);
          }
        },
        {
          type: 'SELECT',
          label: '车型',
          disabled: this.type === 'show'?true:false,
          fieldName: 'modelId',
          placeholder: '请选择',
          itemList: [],
          disabled:false,
          rules: [{ required: true, message: '请选择车型', trigger: 'change' }],
          change: val => {
            this.changeModelSelect(val);
          }
        },
        {
          type: 'SELECT',
          label: '配置',
          disabled: this.type === 'show'?true:false,
          fieldName: 'packageId',
          placeholder: '请选择',
          itemList: [],
          disabled:false,
          rules: [{ required: true, message: '请选择配置', trigger: 'change' }],
          change: val => {
            this.changePackageSelect(val);
          }
        },
        {
          type: 'SELECT',
          label: '选装',
          disabled: this.type === 'show'?true:false,
          fieldName: 'optionId',
          placeholder: '请选择',
          itemList: [],
          disabled:false,
          rules: [{ required: true, message: '请选择选装', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '外饰色',
          disabled: this.type === 'show'?true:false,
          fieldName: 'colorId',
          placeholder: '请选择',
          itemList: [],
          disabled:false,
          rules: [{ required: true, message: '请选择外饰色', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '内饰色',
          disabled: this.type === 'show'?true:false,
          fieldName: 'trimColor',
          placeholder: '请选择',
          itemList: [],
          disabled:false,
          rules: [{ required: true, message: '请选择内饰色', trigger: 'change' }]
        },
        // {
        //   type: 'SELECT',
        //   label: '车辆来源',
        //   disabled: this.type === 'show'?true:false,
        //   fieldName: 'vehicleSources',
        //   placeholder: '请选择',
        //   itemList: this.createDictList('1609'),
        // },
        {
          type: 'SELECT',
          label: '产品状态',
          disabled: this.type === 'show'?true:false,
          fieldName: 'productStatus',
          placeholder: '请选择',
          itemList: this.createDictList('1408'),
          rules: [{ required: true, message: '请选择产品状态', trigger: 'blur' }]
        },
        {
          type: 'DATE',
          label: '上市日期',
          disabled: this.type === 'show'?true:false,
          fieldName: 'enterDate',
          placeholder: '请选择',
          dateType: 'exactdate',
        },
        {
          type: 'DATE',
          label: '退市日期',
          disabled: this.type === 'show'?true:false,
          fieldName: 'exeuntDate',
          placeholder: '请选择',
          dateType: 'exactdate',
        },
        {
          type: 'INPUT_NUMBER',
          label: '车厂指导价',
          disabled: this.type === 'show'?true:false,
          min: 0,
          precision: 2,
          fieldName: 'oemDirectivePrice',
          rules: [{ required: true, message: '请输入车厂指导价', trigger: 'blur' }],
        },
        {
          type: 'INPUT_NUMBER',
          label: '采购单价',
          disabled: this.type === 'show'?true:false,
          min: 0,
          precision: 2,
          fieldName: 'purchasePrice',
          rules: [{ required: true, message: '请输入采购单价', trigger: 'blur' }],
        },
        {
          type: 'SELECT',
          label: '是否有效',
          disabled: this.type === 'show'?true:false,
          fieldName: 'isValid',
          placeholder: '请选择',
          itemList: this.createDictList('1004'),
          rules: [{ required: true, message: '请选择是否有效', trigger: 'blur' }]
        },
        {
          type: 'TEXT_AREA',
          label: '备注',
          disabled: this.type === 'show'?true:false,
          fieldName: 'remark',
          selfCols: 2,
          maxlength:64,
        }
      ];
    },
    formChangeHandle(val) {
      this.saveData = val;
    },
    async saveDialog() {
      this.$refs.formPanel.SUBMIT_FORM();
      if (this.saveData !== null) {
        let res = {};
        if (this.type === 'add') {
          res = await addCarOEM(this.saveData);
        }
        if (this.type === 'edit') {
          res = await addCarOEM({...this.saveData, productId:this.recordId});
        }
        if (res.resultCode === 200) {
          this.closeDialog('refresh');
        }
      }
    },
    closeDialog(param) {
      this.$emit('close', false, param);
    },
    async getBrandListDictOEM() {
      const res = await getBrandListDictOEM();
      if (res.resultCode === 200) {
        console.log(this.formList,"this.formList")
        this.formList.find(item=>item.fieldName==='brandId').itemList = res.data.map(x => ({ value: x.brandId, text: x.brandName }));
        // this.formList = [...this.formList]
      }
    },
    async changeBrandSelect(brandsid) {
      if (!brandsid) {
        this.formList.find(item=>item.fieldName==='seriesId').initialValue = '';
        this.formList.find(item=>item.fieldName==='seriesId').itemList = [];
        this.formList.find(item=>item.fieldName==='modelId').initialValue = '';
        this.formList.find(item=>item.fieldName==='modelId').itemList = [];
        this.formList.find(item=>item.fieldName==='packageId').initialValue = '';
        this.formList.find(item=>item.fieldName==='packageId').itemList = [];
      } else {
        const res = await getSeriesListDictOEM(brandsid);
        if (res.resultCode === 200) {
          this.formList.find(item=>item.fieldName==='seriesId').itemList = res.data.map(x => ({ value: x.seriesId, text: x.seriesName }));
        }
      }
    },
    async changeSeriesSelect(seriessid) {
      const brandsid = this.formList.find(item=>item.fieldName==='brandId').initialValue;
      if (!brandsid || !seriessid) {
        this.formList.find(item=>item.fieldName==='modelId').initialValue = '';
        this.formList.find(item=>item.fieldName==='modelId').itemList = [];
        this.formList.find(item=>item.fieldName==='packageId').initialValue = '';
        this.formList.find(item=>item.fieldName==='packageId').itemList = [];
      } else {
        const res = await getModelListDictOEM(brandsid, seriessid);
        if (res.resultCode === 200) {
          this.formList.find(item=>item.fieldName==='modelId').itemList = res.data.map(x => ({ value: x.modelId, text: x.modelName }));
        }
      }
    },
    async changeModelSelect(modelId) {
      const brandsid = this.formList.find(item=>item.fieldName==='brandId').initialValue;
      const seriessid = this.formList.find(item=>item.fieldName==='seriesId').initialValue;
      if (!brandsid || !seriessid || !modelId) {
        this.formList.find(item=>item.fieldName==='packageId').initialValue = '';
        this.formList.find(item=>item.fieldName==='packageId').itemList = [];
      } else {
        const res = await getPackageListDictOEM(brandsid, seriessid, modelId,{ isValid:10041001});
        if (res.resultCode === 200) {
          this.formList.find(item=>item.fieldName==='packageId').itemList = res.data.map(x => ({ value: x.packageId, text: x.configName }));
        }
      }
    },
    //CMS 增加根据配置查询选装信息
    async changePackageSelect(packageId) {
      const brandsid = this.formList.find(item=>item.fieldName==='brandId').initialValue;
      const seriessid = this.formList.find(item=>item.fieldName==='seriesId').initialValue;
      const modelId = this.formList.find(item=>item.fieldName==='modelId').initialValue;
      if (!brandsid || !seriessid || !modelId || !packageId) {
        this.formList.find(item=>item.fieldName==='packageId').initialValue = '';
        this.formList.find(item=>item.fieldName==='packageId').itemList = [];
      } else {
        const res = await getOptionListDictOEM(packageId);
        if (res.resultCode === 200) {
          this.formList.find(item=>item.fieldName==='optionId').itemList = res.data.map(x => ({ value: x.optionId, text: x.optionName }));
        }
      }
    },
    async getColors() {
      const res = await getWcolorList();
      if (res.resultCode === 200) {
        this.formList.find(item=>item.fieldName==='colorId').itemList = res.data.map(x => ({ value: x.colorId, text: x.colorName }));
      }
    },
    async getIColors() {
      const res = await getIcolorList();
      if (res.resultCode === 200) {
        this.formList.find(item=>item.fieldName==='trimColor').itemList = res.data.map(x => ({ value: x.colorId, text: x.colorName }));
      }
    },
  }
};
</script>

<style lang="less" scoped>
</style>
